<template>
  <div id="app" style="height:100%;">
  	<loading v-model="isLoading"></loading>   
   	<view-box style="height:100%;" ref="viewBox" body-padding-top="46px">
	    <SCHeader slot="header" style="width:100%;position:absolute;left:0;top:0;z-index:100;" v-on:search="openSearch"></SCHeader>
	  	<keep-alive exclude="Detail,My">
	    	<router-view></router-view>
	    </keep-alive>  
	    <SCFooter slot="bottom"></SCFooter>
	</view-box>
	<div v-transfer-dom>
		<popup v-model="showSearch" position="top">
			<group title="信息查询">
				<selector v-model="sctype" ref="defaultValueRef" title="信息类型" direction="rtl" :options="typelist"></selector>
		      	<x-input v-model="saddr" title="出发地" placeholder="输入出发地址" text-align="right" novalidate :show-clear="false" placeholder-align="right"></x-input>
		      	<x-input v-model="eaddr" title="目的地" placeholder="输入目的地址" text-align="right" novalidate :show-clear="false" placeholder-align="right"></x-input>  
				<datetime title="出发时间" placeholder="选择出发日期" v-model="stime" format="YYYY-MM-DD" year-row="{value}年" month-row="{value}月" day-row="{value}日"  :start-date="startDate" :end-date="endDate"></datetime>
		      	
		    </group>
      			<flexbox style="padding:10px;box-sizing:border-box;">
			        <flexbox-item>
			          <x-button type="warn" @click.native="showSearch = false">取消</x-button>
			        </flexbox-item>
			        <flexbox-item>
			          <x-button type="primary" @click.native="search">查询</x-button>
			        </flexbox-item>
			    </flexbox>
		</popup>
	</div>
  </div>
</template>

<script>
import SCHeader from '@/components/header';
import SCFooter from '@/components/footer';
import {dateFormat, Loading,ViewBox,TransferDom,Popup,XInput,Flexbox, FlexboxItem,XButton,Group,Cell,Datetime,Selector } from 'vux'
import { mapState } from 'vuex'

export default {
  name: 'app',
  directives: {
    TransferDom
  },
  components: {
    SCHeader,
    SCFooter,
    Loading,
    ViewBox,
    Popup,
    XInput,
    Flexbox, 
    FlexboxItem,
    XButton,
    Group,
    Cell,
    Datetime,
    Selector
  },
  data() {
  	return {
  		sctype: 0,
  		saddr: '',
  		eaddr: '',
  		stime: '',
  		typelist: [{key: '1', value: '有顺车'}, {key: '2', value: '有乘客'}],
  		showSearch: false,
  	}
  },
  filters: {
    dateFormat
  },
  computed: {
    isLoading() {
      return this.$store.state.lulushunche.isLoading
    },
    isLogin() {
      return this.$store.state.lulushunche.isLogin
    }, 
    startDate() {
      return dateFormat(new Date(), 'YYYY-MM-DD')
    },
    endDate() {
      var myDate=new Date()
      myDate.setDate(myDate.getDate()+10)
      return dateFormat(myDate, 'YYYY-MM-DD')
    }
  },  
  watch: {
    isLogin: function(vnew,vold) {
      if(vold!=undefined && vnew!=undefined && vnew==false){
        window.location.href="/api/oauth/login/type/weixin.html"
      }
    }
  },
  mounted: function () {
    var that=this;
    this.$http.get(GV.ROOT + 'user/index/is_login.html',{
        params: {
        }
      }).then(function(response){
          // 响应成功回调
          console.log(response);
          if(response.data.status==0){
		      that.$http.get(GV.ROOT + 'user/login/test_login.html',{
		        params: {
		        }
		      }).then(function(response){
		          // 响应成功回调
		          console.log(response);

		      }, function(response){
		          // 响应错误回调
		          //router.push('/login')
		      });
          }

      }, function(response){
          // 响应错误回调
          //router.push('/login')
      });
  },
  methods:{
  	openSearch: function(){
  		console.log('dosearch');
  		this.showSearch=true;
  	},
  	search: function(){
  		var that=this;
    	this.$http.get(GV.ROOT + 'shunche/index/geturl.html',{
	        params: {
                  type:this.sctype,
                  saddr:this.saddr,
                  eaddr:this.eaddr,
                  stime:this.stime
	        }
	    }).then(function(response){
	          // 响应成功回调
	        console.log(response);
  			that.showSearch=false;
        	that.$router.push(response.data.url);

	    }, function(response){
	          // 响应错误回调
	    });
  	}
  }
}
</script>

<style lang="less">
@import '~vux/src/styles/reset.less';
html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  background-color: #fbf9fe;
}
</style>
